<!-- src/views/banner/components/home.vue -->
<script setup>
import { ref, onMounted, computed } from 'vue'
import axios from 'axios'
// import MyTable from '@/components/MyTable.vue'
import { useRouter } from 'vue-router'
const router = useRouter()

const change = (current, size) => {
  console.log(current, size)
  currentPage.value = current
  pageSize.value = size
}

const currentPage = ref(1)
const pageSize = ref(10)
// 引入局部组件
const queryList = ref([])
const getShowData = () => {
  axios.get('http://localhost:8090/query/search').then((res) => {
    console.log('res.data', res.data)
    queryList.value = res.data
    console.log('queryList.value', queryList.value)
  })

  // getQueryList().then((res) => {

  //   console.log("res.data",res.data)
  //   queryList.value = res.data
  //   console.log("queryList.value",queryList.value)
  // })
}

const showData = computed(() => {
  // 深拷贝保存一份数据
  const arr = JSON.parse(JSON.stringify(queryList.value))
  // console.log('arr',arr)
  const newArr = arr.splice((currentPage.value - 1) * pageSize.value, pageSize.value)
  // console.log('newArr',newArr)
  // console.log('arr1',adminData.value)
  return newArr
})

onMounted(() => {
  getShowData()
})

const deleteFn = (queryid) => {
  // deleteQuery({ queryid }).then((res) => {
  //   getShowData()
  // })

  axios.delete('http://localhost:8090/query/delete/' + queryid).then((res) => {
    getShowData()
  })
}

const deleteArr = ref([])
const deleteMultiple = (val) => {
  const arr = []
  val.forEach((element) => {
    arr.push(element.id)
  })

  deleteArr.value = arr
  console.log('deleteArr', deleteArr.value)
}

const deleteCommandArr = ref([])
const deleteMultipleFn = () => {
  axios
    .delete('http://localhost:8090/query/delete/batch' + '?ids=' + deleteArr.value)
    .then((res) => {
      getShowData()
    })
}

const value2 = ref('')

const input = ref('')

const searchFn = () => {
  // axios.get('http://localhost:8090/query/search/option'+"?queryName="+input.value.length>0 ? input.value : 'null' +"&startDate="+value2.value.length>0 ? value2.value[0] : 'null'+"&endDate="+value2.value.length>0 ? value2.value[1] : 'null').then(res=>{
  //   getShowData()
  // })

  axios
    .post('http://localhost:8090/query/search/option', {
      name: input.value.length > 0 ? input.value : '',
      startDate: value2.value.length > 0 ? value2.value[0] : '',
      endDate: value2.value.length > 0 ? value2.value[1] : ''
    })
    .then((res) => {
      queryList.value = res.data
    })

  console.log('input:', input.value.length > 0 ? input.value : '')
  console.log('value2.value[0]', value2.value[0])
  console.log('value1', value2.value.length)
}

const changeData = (id) => {
  router.push({
    path: '/query/add',
    query: {
      id: id
    }
  })
}
</script>

<style scoped>
.demo-datetime-picker {
  display: inline-block;
  padding: 0;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: stretch;
  margin-right: 10px;
  margin-left: 10px;
}
.demo-datetime-picker .block {
  padding: 30px 0;
  text-align: center;
}
/* .line {
  width: 1px;
  background-color: var(--el-border-color);
} */
el-input {
  display: inline-block;
  margin-left: 10px;
  margin-right: 10px;
}
</style>

<template>
  <el-button type="primary" @click="router.push('/query/add')">添加试卷</el-button>
  <el-popconfirm title="确定删除吗?" @confirm="deleteMultipleFn">
    <template #reference>
      <el-button v-if="deleteArr.length > 0" type="primary">批量删除</el-button>
    </template>
  </el-popconfirm>

  <el-input v-model="input" style="width: 240px" placeholder="输入姓名查询" />

  <div class="demo-datetime-picker">
    <div class="block">
      <el-date-picker
        v-model="value2"
        type="datetimerange"
        start-placeholder="Start date"
        end-placeholder="End date"
        format="YYYY-MM-DD HH:mm:ss"
        value-format="YYYY-MM-DD HH:mm:ss"
      />
    </div>
  </div>

  <el-button type="primary" @click="searchFn">搜索</el-button>

  <el-table :data="showData" @selection-change="deleteMultiple">
    <el-table-column type="selection" width="55" />
    <el-table-column type="index" label="序号" width="60px">
      <template #default="scope">
        <span>{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</span>
      </template>
    </el-table-column>

    <el-table-column property="name" label="名称" />
    <el-table-column property="production" label="简介" />
    <!-- 字段对应错啦 -->
    <el-table-column prop="startDate" label="开始时间"></el-table-column>
    <el-table-column prop="endDate" label="结束时间"></el-table-column>

    <el-table-column label="操作">
      <template #default="scope">
        <el-popconfirm title="确定删除吗?" @confirm="deleteFn(scope.row.id)">
          <template #reference>
            <el-button size="small" type="danger">删除</el-button>
          </template>
        </el-popconfirm>
        <el-button size="small" type="danger" @click="changeData(scope.row.id)">更改</el-button>
        <el-button size="small" type="danger">答题</el-button>
        <el-button size="small" type="danger">查看</el-button>
      </template>
    </el-table-column>
  </el-table>

  <el-pagination
    background
    layout="total, jumper, prev, pager, next, sizes"
    :total="queryList.length"
    :page-sizes="[5, 10, 20, 40, 100]"
    @change="change"
  />
</template>
